<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span='8'>
            <a-form-item label='客户简称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input v-decorator="['shortName']" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='8'>
            <a-form-item label='商机编号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input v-decorator="['opportunityNum']" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='8'>
            <a-form-item label='期望日期' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-date v-decorator="['expectTime']"
                       :trigger-change='true' style='width: 100%' disabled />
            </a-form-item>
          </a-col>
          <a-col :span='8'>
            <a-form-item label='分配售前' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input v-decorator="['distributionSalebefore']" disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='8'>
            <a-form-item label='商机名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input v-decorator="['opportunityName']" disabled></a-input>
              <a-input v-decorator="['opportunityId']" v-show='false'></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='工作内容' :labelCol='labelCol2' :wrapperCol='wrapperCol2'>
              <a-textarea v-decorator="['applyWorkDesc']" disabled></a-textarea>
            </a-form-item>
          </a-col>
          <a-col :span='8'>
            <a-form-item label='完成状态' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-switch v-decorator="['status', validatorRules.status]" placeholder='请输入状态'></j-switch>
            </a-form-item>
          </a-col>
          <a-col :span='8'>
            <a-form-item label='实际日期' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-date placeholder='请选择实际日期' v-decorator="['actualTime', validatorRules.actualTime]" :trigger-change='true'
                      style='width: 100%' />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="工时" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['workHours', validatorRules.workHours]" placeholder="请输入工时" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='支持总结' :labelCol='labelCol2' :wrapperCol='wrapperCol2'>
              <a-textarea v-decorator="['supportSummary', validatorRules.supportSummary]" rows='3'
                          placeholder='请输入支持总结' />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="商机文档" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="busDocumentTable.loading"
          :columns="busDocumentTable.columns"
          :dataSource="busDocumentTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"
        />
      </a-tab-pane>
    </a-tabs>
    <a-row v-if="showFlowSubmitButton" style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk" type='primary'>提 交</a-button></a-row>
  </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'BusSalebeforeActivityForm',
  mixins: [JEditableTableMixin],
  components: {
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 22 },
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        actualTime: {
          rules: [
            { required: true, message: '请选择实际日期!'},
          ]
        },
        workHours: {
          rules: [
            { required: true, message: '工时不能为空'},
            // { pattern: 'z', message: '请输入整数工时'},
          ],
        },
        sysOrgCode: {
          initialValue:"A01",
          rules: [
          ]
        },
        status: {
          rules: [
            { required: true, message: ''},
          ]
        },
        supportSummary: {
          rules: [
            { required: true, message: '请输入支持总结!'},
          ]
        },
      },
      refKeys: ['busDocument', ],
      tableKeys:['busDocument', ],
      activeKey: 'busDocument',
      // 商机文档
      busDocumentTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '文档名称',
            required: true,
            key: 'name',
            type: FormTypes.input,
            width:"300px",
            placeholder: '上传文件自动填写名称',
            defaultValue:'',
             validateRules: [{ required: true, message: '上传文件自动填写名称' }],
          },
          {
            title: '文档来源',
            required: true,
            key: 'source',
            type: FormTypes.select,
            dictCode:"icm_bus_doc_source",
            width:"300px",
            placeholder: '请选择${title}',
            defaultValue:'',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '内容概述',
            key: 'contentSummary',
            type: FormTypes.input,
            width:"300px",
            placeholder: '请输入${title}',
            defaultValue:'',
          },
          {
            title: '文件',
            required: true,
            token: true,
            key: 'file',
            type: FormTypes.file,
            responseName:"message",
            width:"200px",
            placeholder: '请选择文件',
            defaultValue:'',
            validateRules: [{ required: true, message: '${title}必传' }],
          },
          {
            title: 'opportunity_id',
            key: 'opportunityId',
            defaultValue: "",
            type:"hidden",
          },
        ]
      },
      url: {
        add: "/bussiness/busSalebeforeActivity/add",
        edit: "/bussiness/busSalebeforeActivity/edit",
        queryById: "/bussiness/busSalebeforeActivity/queryById",
        busDocument: {
          list: '/bussiness/busSalebeforeActivity/queryBusDocumentByMainId'
        },
      },
      fields: [
        'status', 'actualTime', 'supportSummary', 'salebeforeApplyId', 'applyWorkDesc',
        'opportunityName', 'opportunityNum', 'shortName', 'file', 'applyTime', 'expectTime',
        'distributionSalebefore','opportunityId','workHours'
      ],
    }
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: ()=>{},
      required: false
    },
    //表单模式：false流程表单 true普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled(){
      if(this.formBpm===true){
        if(this.formData.disabled===false){
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton(){
      if(this.formBpm===true){
        if(this.formData.disabled===false){
          return true
        }
      }
      return false
    }
  },
  created () {
    //如果是流程中表单，则需要加载流程表单data
    this.showFlowData();
    console.log('%c%s', 'color:red','model')
    console.log(this.model)
  },
  methods: {
    addBefore(){
      this.form.resetFields()
      this.busDocumentTable.dataSource=[]
    },
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      let fieldval = pick(this.model,this.fields)
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.busDocument.list, params, this.busDocumentTable)
      }
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        busDocumentList: allValues.tablesValue[0].values,
      }
    },
    //渲染流程表单数据
    showFlowData(){
      if(this.formBpm === true){
        let params = {id:this.formData.dataId};
        getAction(this.url.queryById,params).then((res)=>{
          if(res.success){
            this.edit (res.result);
          }
        })
      }
    },
    validateError(msg){
      this.$message.error(msg)
    },
    popupCallback(row){
      this.form.setFieldsValue(pick(row, this.fields))
    },

  }
}
</script>

<style scoped>
</style>